<!--
 * @Author: DingNanLin 1981261270@qq.com
 * @Date: 2024-12-02 14:47:06
 * @LastEditors: DingNanLin 1981261270@qq.com
 * @LastEditTime: 2024-12-11 14:34:39
 * @FilePath: \water-soil-conservation-web\src\views\warnPredict\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 预警信息 -->
<template>
    <div class="warn-info">
        <div class="map-box">
            <map-2d
                :mapId="mapConfig.mapId"
                :center="mapConfig.center"
                :zoom="mapConfig.zoom"
                :basemaps="mapConfig.basemaps"
                @MapLoadSuccess="handelMapLoadSuccess"
            />
        </div>
        <transition>
			<div class="left-container" v-if="mapLoadSuccess">
				<div class="card-container animate__animated animate__backInLeft">
					<div class="card-title">预警列表</div>
					<div class="card-content">
						<template v-if="wranAreaDataList && wranAreaDataList.length > 0">
							<div class="card-list">
								<div
									class="card-item"
									v-for="(item, index) in wranAreaDataList"
									:key="index"
									@click="handelCheckedWarnAreaItem(item)"
									:class="activeWranAreaItem.id === item.id ? 'active' : ''"
								>
									<div class="left">
										
									</div>
									<div class="main">
										<div class="item">
											<div class="label">预警项目：</div>
											<div class="value">{{ item.area_name }}</div>
										</div>
										<div class="item">
											<div class="label">负责人：</div>
											<div class="value">{{ item.contact_person }}</div>
										</div>
										<div class="item">
											<div class="label">联系方式：</div>
											<div class="value">{{ item.contact_phone }}</div>
										</div>
										<div class="item">
											<div class="label">项目地址：</div>
											<div class="value">{{ item.project_address }}</div>
										</div>
									</div>
								</div>
							</div>
							
						</template>
						<div class="no-data" v-else>暂无数据</div>
					</div>
				</div>
			</div>
        </transition>
        <transition>
            <div class="right-container" v-if="mapLoadSuccess">
                <!-- 报警设备 -->
                <div class="card-container warn-device animate__animated animate__backInRight">
                    <div class="card-title">预警设备</div>
                    <div class="card-content">
						<Vue3SeamlessScroll
                            class="warn-list"
                            v-model="isScroll"
                            :list="warnDeviceDataList"
                            :step="0.3"
                            :hover="true"
                            :limit-scroll-num="3"
                            :wheel="true"
                        >
							<div class="card-list">
								<div
									class="item"
									v-for="(item, index) in warnDeviceDataList"
									:key="index"
								>
									<div class="row">
										<div class="label">
											设备名称
										</div>
										<div class="value">
											{{ item.sbmc }}
										</div>
									</div>
									<div class="row">
										<div class="label">设备类型</div>
										<div class="value">{{item.typeName}}</div>
									</div>
									<div class="row">
										<div class="label">预警时间</div>
										<div class="value">{{item.warnTime}}</div>
									</div>
									<div class="row">
										<div class="label">设备阈值</div>
										<div class="value">{{item.threshold}}</div>
									</div>
									<div class="row">
										<div class="label">实况数值</div>
										<div class="value tag">{{item.actVal}}</div>
									</div>
								</div>
							</div>
                        </Vue3SeamlessScroll>
                    </div>
                </div>
            </div>
        </transition>
		<!-- 预警设备详情弹框 -->
		<transition
            enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__bounceOut"
        >
            <div class="wran-device-info-dialog" v-if="warnDeviceInfoDialog">
                <div class="dialog-title">
                    <div class="name">
						{{ activeWarnAreaDeviceItem.sbmc }}
					</div>
                </div>
                <div class="dialog-main">
                    <div class="video-content" v-if="activeWarnAreaDeviceItem && activeWarnAreaDeviceItem.deviceType == 8">
						<vue3videoPlay
							ref="dialogVideoPlay"
							width="100%"
							height="100%"
							:title="activeWarnAreaDeviceItem.sbmc"
							:src="activeWarnAreaDeviceItem.deviceUrl"
							v-bind="options"
						/>
					</div>
					<div class="data-content" v-else>
						<div class="data-list">
							<div class="data-item">
								<div class="label">设备名称</div>
								<div class="value">{{warnDeviceInfoData.sbmc}}</div>
							</div>
							<div class="data-item">
								<div class="label">设备类型</div>
								<div class="value">{{warnDeviceInfoData.typeName}}</div>
							</div>
							<div class="data-item">
								<div class="label">设备阈值</div>
								<div class="value">{{warnDeviceInfoData.threshold}}</div>
							</div>
							<div class="data-item">
								<div class="label">实况数值</div>
								<div class="value tag">{{warnDeviceInfoData.actVal}}</div>
							</div>
							<div class="data-item">
								<div class="label">设备位置</div>
								<div class="value">{{warnDeviceInfoData.lon}}, {{ warnDeviceInfoData.lat }}</div>
							</div>
							<div class="data-item">
								<div class="label">预警时间</div>
								<div class="value">{{warnDeviceInfoData.warnTime}}</div>
							</div>
						</div>
					</div>
                </div>
                <div class="dialog-footer">
                    <div class="btn" @click="warnDeviceInfoDialog=false">关闭</div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script setup>
import Map2d from '@/components/map2d/index'
import { ref, inject } from 'vue'
import { loadImg } from '@/utils/loadImg.js'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { warnAreaList, warnAreaByDeviceList, warnAreaByDeviceInfoData,warnAreaByDeviceDataList } from '@/http/apis/index'
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
const mars2d = inject('mars2d')
// gis地址
// const GIS_API = import.meta.env.VITE_API_GIS_API
// 地图对象
let map = null
// 地图数据图层组
let mapLayerGroup = null
// 列表自动滚动
const isScroll = ref(true)
// 地图配置
const mapConfig = {
    mapId: 'warnInfoMap',
    center: {
        lng: 109.211603,
        lat: 35.858524
    },
    zoom: 8,
    basemaps: [
        // {
        //     type: 'wmts',
        //     name: '蓝色地图',
        //     url: GIS_API + '/geoserver/Ele_Map/gwc/service/wmts',
        //     layer: 'Ele_Map:HH_Basemap',
        //     format: 'image/png',
        //     tileMatrixSetID: 'EPSG:4326', // 对应wmts请求的 tilematrixSet
        //     tilematrixBefore: 'EPSG:4326:', // 对应wmts请求的 tilematrix
        //     crs: 'EPSG:4326',
        //     show: true
        // }
        {
            name: '高德卫星',
            type: 'group',
            show: true,
            layers: [
                { name: '底图', type: 'gaode', layer: 'img_d' }
                // { name: "注记", type: "gaode", layer: "img_z" }
            ]
        }
    ]
}
// 地图是否加载成功
const mapLoadSuccess = ref(false)
// 预警项目列表
const wranAreaDataList = ref([])
// 选中的预警项目
const activeWranAreaItem = ref({})
// 报警设备列表
const warnDeviceList = ref([])
// 报警设备数据列表
const warnDeviceDataList = ref([])
// 选中的预警设备
const activeWarnAreaDeviceItem = ref({})
// 预警详情设备弹框
const warnDeviceInfoDialog = ref(false)
// 选中的预警设备详情数据
const warnDeviceInfoData = ref({})
// 视频播放器配置项
const options = {
	mirror: false, //镜像画面
	controlBtns: [
		"audioTrack",
		"quality",
		"volume",
	], //显示所有按钮,
}
/**
 * 地图加载成功
 */
const handelMapLoadSuccess = async params => {
    map = params.map
    mapLoadSuccess.value = params.status
    // 创建地图数据图层组
    createMapLayerGroup()
    // 查询预警项目列表
	handelFeatchWarnAreaList()
	// 查询预警项目下的预警设备数据列表
	handelFeatchWarnAreaDeviceDataList();
}
/**
 * 创建地图数据图层组
 */
const createMapLayerGroup = () => {
    mapLayerGroup = new mars2d.layer.GroupLayer({
        id: 'warn-info-point-layer',
        name: '数据概览地图数据图层组'
    })
    map.addLayer(mapLayerGroup)
}
/**
 * 获取预警项目列表
 */
const handelFeatchWarnAreaList = async () => {
	let res = await warnAreaList();
	if (res && res.code === 0) {
		wranAreaDataList.value = res.data;
	} else { 
		wranAreaDataList.value = [];
	}
	handelCheckedWarnAreaItem(wranAreaDataList.value[0])
}
/**
 * 预警项目点击
 */
const handelCheckedWarnAreaItem = item => {
	activeWranAreaItem.value = { ...item }
	handelAddWarnArea();
	handelFeatchWarnAreaDeviceList();
}
/**
 * 查询预警项目下的预警设备列表
 */
const handelFeatchWarnAreaDeviceList = async () => { 
	warnDeviceList.value = []
	let res = await warnAreaByDeviceList({
		projectId:activeWranAreaItem.value.id
	})
	if (res && res.code === 0) {
		warnDeviceList.value = res.data;
		handelAddWarnAreaByDeviceList();
	} else { 
		warnDeviceList.value = []
	}
}
/**
 * 查询预警项目下的预警设备数据列表
 */
const handelFeatchWarnAreaDeviceDataList = async () => {
	let res = await warnAreaByDeviceDataList()
	console.log('res=====', res)
	console.log('res', res)
	warnDeviceDataList.value = []
	if (res && res.code === 0) { 
		warnDeviceDataList.value = res.data;
	} else {
		warnDeviceDataList.value = []
	}
}
/**
 * 添加预警项目
 */
const handelAddWarnArea = () => {
	removeWarnArea();
	const geoJsonLayer = new mars2d.layer.GeoJsonLayer({
		id:activeWranAreaItem.value.area_id,
		name: '预警项目',
		data: activeWranAreaItem.value.area_json,
		attr: activeWranAreaItem.value,
	})
	mapLayerGroup.addLayer(geoJsonLayer);
	console.log('activeWranAreaItem.value', activeWranAreaItem.value)
	map.flyTo([activeWranAreaItem.value.lat, activeWranAreaItem.value.lng], 16)
}
/**
 * 移除预警项目区域
 */
const removeWarnArea = () => { 
	mapLayerGroup && mapLayerGroup.eachLayer((layers) => { 
		console.log('layers', layers)
		if (layers && layers.options.name === '预警项目') { 
			mapLayerGroup.removeLayer(layers)
		}
	})
}
/**
 * 添加预警项目内的预警设备点位
 */
const handelAddWarnAreaByDeviceList = () => { 
	activeWarnAreaDeviceItem.value = {};
	removeMapAreaByDevice();
	const graphicLayer = new mars2d.layer.GraphicLayer({
        name: '预警项目设备',
	})
	mapLayerGroup.addLayer(graphicLayer)
	warnDeviceList.value.forEach(ele => {
		if (ele.lat && ele.lon) { 
			const graphic = new mars2d.graphic.Marker({
				latlng: [ele.lat, ele.lon],
				style: {
					image: new URL(`@/assets/images/icon-point.png`, import.meta.url).href,
					width: 32,
					height: 80,
					horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
					verticalOrigin: mars2d.VerticalOrigin.BOTTOM
				},
				attr: ele,
				
			})
			const graphic1 = new mars2d.graphic.Marker({
				latlng: [ele.lat, ele.lon],
				style: {
					width: 5,
					pulse: true,
					pulseColor: "#ff0000"
				},
				attr: ele,
			})
			graphicLayer.addGraphic(graphic1)
			graphicLayer.addGraphic(graphic);
			graphic.on(mars2d.EventType.click, function (event) {
				warnDeviceInfoDialog.value = false;
				activeWarnAreaDeviceItem.value = event.target.options.attr;
				console.log('activeWarnAreaDeviceItem.value', activeWarnAreaDeviceItem.value)
				if (activeWarnAreaDeviceItem.value.deviceType == 8) {
					warnDeviceInfoDialog.value = true;
				} else { 
					featchWarnAreaDeviceInfoDatas();
				}
			})
		}
    })
}
/**
 * 移除预警项目内的预警设备点位
 */
const removeMapAreaByDevice = () => { 
	mapLayerGroup && mapLayerGroup.eachLayer((layers) => { 
		if (layers && layers.options.name === '预警项目设备') { 
			mapLayerGroup.removeLayer(layers)
		}
	})
}
/**
 * 查询预警设备的详情数据
 */
const featchWarnAreaDeviceInfoDatas = async () => { 
	let res = await warnAreaByDeviceInfoData({
		deviceId:activeWarnAreaDeviceItem.value.id
	})
	console.log('预警设备详情数据res======', res)
	if (res && res.code === 0) { 
		warnDeviceInfoData.value = res.data;
	}
	warnDeviceInfoDialog.value = true;
}
</script>
<style lang="scss" scoped>
.warn-info {
    @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    position: relative;
    .map-box {
        @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
    }
    .left-container {
        position: absolute;
        left: 10px;
        top: 80px;
        @include box-flex(
            $width: 350px,
            $height: calc(100% - 100px),
            $direction: column,
            $justify: space-between,
            $align: center
        );
        z-index: 1000;
        > .card-container {
            @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: flex-start,
                    $align: center,
                    $flex-1: 1
                );
                overflow-y: auto;
                padding: 20px;
				.card-list{
					@include box-flex(
						$width: 100%,
						$height: 100%,
						$direction: column,
						$justify: flex-start,
						$align: center,
					);
					overflow-y: auto;
					.card-item {
						@include box-flex(
							$width: 100%,
							$height: auto,
							$direction: row,
							$justify: flex-start,
							$align: center
						);
						background: url('@/views/liveMonitor/images/bg-menu.png') no-repeat;
						background-size: 100% 100%;
						margin-bottom: 20px;
						transition: all 0.3s;
						cursor: pointer;
						.left{
							@include box-flex(
								$width: 10px,
								$height: 100%,
								$direction: row,
								$justify: center,
								$align: center
							);
							margin-right: 10px;
							background: #FFD03B;
						}
						.main{
							@include box-flex(
								$width: auto,
								$height: 100%,
								$direction: column,
								$justify: center,
								$align: flex-start,
								$flex-1:1
							);
							padding: 10px 0;
							.item{
								@include box-flex(
									$width: 100%,
									$height: 50%,
									$direction: row,
									$justify: flex-start,
									$align: center
								);
								padding: 5px 0;
								.label{
									margin-right: 10px;
									width: 30%;
								}
								.value{
									color: #FFD03B;
								}
							}

						}
						&:hover {
							background: url('@/views/liveMonitor/images/bg-menu-d.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					.card-item.active {
						background: url('@/views/liveMonitor/images/bg-menu-d.png') no-repeat;
						background-size: 100% 100%;
					}
				}
                
                .no-data {
                    @include box-flex(
                        $width: 100%,
                        $height: 100%,
                        $direction: column,
                        $justify: center,
                        $align: center
                    );
                }
            }
        }
    }
    .right-container {
        position: absolute;
        right: 10px;
        top: 80px;
        @include box-flex(
            $width: 350px,
            $height: calc(100% - 100px),
            $direction: column,
            $justify: space-between,
            $align: center
        );
        z-index: 1000;
        > .card-container {
            @include box-flex($width: 100%, $height: 100%, $direction: column, $justify: center, $align: center);
            .card-content {
                @include box-flex(
                    $width: 100%,
                    $height: 100%,
                    $direction: column,
                    $justify: center,
                    $align: center
                );
                padding: 10px;
				overflow: hidden;
				.card-list{
					@include box-flex(
						$width: 100%,
						$height: 100%,
						$direction: column,
						$justify: center,
						$align: center,
					);
					.item{
						@include box-flex($width: 100%, $height: auto, $direction: column, $justify: center, $align: flex-start);
						background-image: linear-gradient(to bottom,rgba(255,208,59,0.3), rgba(255,208,59,0.1), rgba(255,208,59,0.3));
						margin: 5px 0;
						padding: 10px;
						border-right: solid 10px #47b7e6;
						.row{
							@include box-flex($width: 100%, $height: auto, $direction: row, $justify: flex-start, $align: center);
							padding: 2px 0;
							.label{
								@include box-flex($width: 80px, $height: auto, $direction: row, $justify: center, $align: center);
							}
							.value{
								color: #FFD03B;
							}
							.value.tag{
								color: #FF5555;
							}
						}
					}
				}
            }
        }
    }

	.wran-device-info-dialog{
		@include box-flex($width: 40vw, $height: auto, $direction: column, $justify: center, $align: center);
        position: absolute;
        z-index: 1000;
        background: url('@/views/dataOverview/images/bg-dialog.png') no-repeat;
        background-size: 100% 100%;
        padding: 20px 20px 0 20px;
        .dialog-title {
            @include box-flex($width: 100%, $height: 40px, $direction: row, $justify: space-between, $align: center);
            padding: 0 20px;
            background: #0f2b3f;
        }
        .dialog-main {
            @include box-flex(
                $width: 100%,
                $height: calc(100% - 40px),
                $direction: column,
                $justify: center,
                $align: center
            );
            padding: 20px 20px 0 20px;
			.video-content{
				@include box-flex(
					$width: 100%,
					$height: 40vh,
					$direction: column,
					$justify: center,
					$align: center
				);
			}
			.data-content{
				@include box-flex(
					$width: 100%,
					$height: 100%,
					$direction: column,
					$justify: center,
					$align: center
				);
				.data-list{
					@include box-flex(
						$width: 100%,
						$height: 100%,
						$direction: row,
						$justify: flex-start,
						$align: center,
						$flex-wrap:wrap
					);
					.data-item{
						@include box-flex(
							$width: 50%,
							$height: 100%,
							$direction: row,
							$justify: flex-start,
							$align: center
						);
						padding: 10px;
						.label{
							@include box-flex(
								$width: 30%,
								$height: 100%,
								$direction: row,
								$justify: flex-start,
								$align: center
							);
							background: #0f2b3f;
							padding: 10px;
						}
						.value{
							@include box-flex(
								$width: 70%,
								$height: 100%,
								$direction: row,
								$justify: flex-start,
								$align: center
							);
							padding-left:10px;
							background: rgba($color: #08223e, $alpha: 0.5);
						}
						.tag{
							color: #FF5555;
						}
					}
				}
			}
        }
        .dialog-footer {
            @include box-flex($width: 100%, $height: auto, $direction: row, $justify: flex-end, $align: center);
            .btn {
                padding: 5px 20px;
                margin: 10px;
                border: solid 1px #0f2b3f;
                cursor: pointer;
                transition: all 0.3s;
                &:hover {
                    background: #47b7e6;
                }
            }
        }
	}
}
</style>
<style lang="scss">
.warn-list,
.scroll {
    @include box-flex($width: 100%, $height: auto, $direction: column, $justify: flex-start, $align: center);
    > div {
        width: 100% !important;
    }
}
</style>
